<template>
  <el-carousel 
    indicator-position="outside" 
    :interval="4000" 
    arrow="hover"
    :height="carouselHeight"
    class="lunbo-carousel"
  >
    <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
      <div class="carousel-content">
        <img :src="item.image" :alt="item.title" class="carousel-image">
        <div class="carousel-overlay">
          <h2 class="carousel-title">{{ item.title }}</h2>
          <p class="carousel-description">{{ item.description }}</p>
        </div>
      </div>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  name: 'LunboModel',
  data() {
    return {
      carouselItems: [
        {
          image: require('@/assets/image/1.jpg'),
          title: '专业服务',
          description: '为您提供最优质的技术解决方案'
        },
        {
          image: require('@/assets/image/2.jpg'),
          title: '创新科技',
          description: '引领行业发展，创造美好未来'
        },
        {
          image: require('@/assets/image/3.jpg'),
          title: '团队协作',
          description: '专业团队，高效协作，成果卓越'
        },
        {
          image: require('@/assets/image/4.jpg'),
          title: '品质保证',
          description: '严格把控质量，确保客户满意'
        }
      ]
    }
  },
  computed: {
    carouselHeight() {
      // 根据屏幕宽度动态设置轮播图高度
      if (window.innerWidth <= 480) {
        return '250px'
      } else if (window.innerWidth <= 768) {
        return '300px'
      } else {
        return '500px'
      }
    }
  },
  mounted() {
    // 监听窗口大小变化
    window.addEventListener('resize', this.handleResize)
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      // 触发重新计算
      this.$forceUpdate()
    }
  }
}
</script>

<style scoped>
.lunbo-carousel {
  width: 100%;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  margin: 0;
  padding: 0;
}

.carousel-content {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.carousel-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
  padding: 40px 30px 30px;
  text-align: center;
}

.carousel-title {
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 10px 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.carousel-description {
  font-size: 16px;
  margin: 0;
  opacity: 0.9;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* 平板端响应式设计 */
@media (max-width: 768px) {
  .carousel-title {
    font-size: 22px;
    margin-bottom: 8px;
  }
  
  .carousel-description {
    font-size: 14px;
  }
  
  .carousel-overlay {
    padding: 30px 20px 20px;
  }
  
  :deep(.el-carousel__arrow) {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  
  :deep(.el-carousel__indicators) {
    bottom: 18px;
  }
  
  :deep(.el-carousel__indicator) {
    width: 8px;
    height: 8px;
    margin: 0 4px;
  }
}

/* 手机端响应式设计 */
@media (max-width: 480px) {
  .carousel-title {
    font-size: 18px;
    margin-bottom: 6px;
    line-height: 1.3;
  }
  
  .carousel-description {
    font-size: 12px;
    line-height: 1.4;
  }
  
  .carousel-overlay {
    padding: 20px 15px 15px;
  }
  
  :deep(.el-carousel__arrow) {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
  
  :deep(.el-carousel__indicators) {
    bottom: 12px;
  }
  
  :deep(.el-carousel__indicator) {
    width: 6px;
    height: 6px;
    margin: 0 3px;
  }
}

/* 超小屏幕适配 */
@media (max-width: 360px) {
  .carousel-title {
    font-size: 16px;
    margin-bottom: 5px;
  }
  
  .carousel-description {
    font-size: 11px;
  }
  
  .carousel-overlay {
    padding: 15px 10px 10px;
  }
  
  :deep(.el-carousel__arrow) {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  
  :deep(.el-carousel__indicators) {
    bottom: 10px;
  }
  
  :deep(.el-carousel__indicator) {
    width: 5px;
    height: 5px;
    margin: 0 2px;
  }
}

/* 轮播图指示器样式 */
:deep(.el-carousel__indicators) {
  bottom: 20px;
}

:deep(.el-carousel__indicator) {
  background-color: rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}

:deep(.el-carousel__indicator.is-active) {
  background-color: #fff;
  transform: scale(1.2);
}

/* 轮播图箭头样式 */
:deep(.el-carousel__arrow) {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 18px;
  transition: all 0.3s ease;
  display: none; /* 隐藏箭头 */
}

:deep(.el-carousel__arrow:hover) {
  background-color: rgba(0, 0, 0, 0.6);
  transform: scale(1.1);
}

/* 移动端隐藏箭头（可选） */
@media (max-width: 480px) {
  :deep(.el-carousel__arrow) {
    opacity: 0.8;
    display: none; /* 移动端也隐藏箭头 */
  }
  
  :deep(.el-carousel__arrow:hover) {
    opacity: 1;
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  :deep(.el-carousel__arrow) {
    opacity: 0.9;
  }
  
  .carousel-overlay {
    padding-bottom: 20px; /* 恢复原来的间距 */
  }
}

/* 隐藏指示器 */
:deep(.el-carousel__indicators) {
  display: none !important;
}
</style>